<template>
  <el-dialog class="ui-dialog" width="1239px" :visible.sync="isVisible" :title="title" :close-on-click-modal="false">
    <div class="params-block">
      <el-row type="flex" justify="center" align="middle">
        <el-radio-group class="modify-radioGroup" style="margin-right: 16px;" v-model="form.type">
          <el-radio label="1">物理类</el-radio>
          <el-radio label="2">历史类</el-radio>
        </el-radio-group>
        <el-input v-model="form.score" @clear="clearScore" @change="onSearch" placeholder="查询区间100-700分" class="input-score" @keyup.enter.native="onSearch" clearable style="width: 250px;"></el-input>
        <el-button v-resubmit @click="onSearch" class="search-button" type="primary">查询</el-button>
      </el-row>

      <div v-loading="loading">
        <div class="chooseYear">
          <el-row>
            <el-col :span="6">
              <section class="chooseYearItem" style="text-align: right; cursor: auto;">
                <div class="chooseYearItem-th">年份</div>
                <div class="chooseYearItem-td">
                  <span style="color: #F96630;">{{ form.score }}分</span>
                  <span style="padding-left: 5px;">同分最高位次</span>
                </div>
                <div class="chooseYearItem-td">
                  <span style="color: #F96630;">{{ form.score }}分</span>
                  <span style="padding-left: 5px;">同分最低位次</span>
                </div>
              </section>
            </el-col>
            <el-col v-for="item in yearArray" :span="4">
              <section @click="onSelectYearItem(item)" :class="['chooseYearItem', {'is-active': item.year === form.year }]">
                <div class="chooseYearItem-th">{{ item.year }}</div>
                <div class="chooseYearItem-td">{{ item.tallWeici}}</div>
                <div class="chooseYearItem-td">{{ item.lowWeici}}</div>
              </section>
            </el-col>
          </el-row>
        </div>
        <LineChart :options="chartOptions" v-if="isVisible"/>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { LineChart } from '@/components/Chart'
import { request } from "@/util/request.js"

export default {
  inheritAttrs: false,
  components: { LineChart },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
  },
  data() {
    const that = this
    return {
      form: this.initForm(),
      loading: false,
      yearArray: [],
      chartScoreNode: null, // 一批本科分数线 firstScore 二批本科分数线 secondScore 高职分数线 thirdScore
      chartOptions: {
        tooltip: {
          trigger: 'axis',
          // formatter: '当前分数：{b0}<br />对应位次：{c0}',
          formatter: function (params) {
            return `当前分数：${params[0].data.score}<br />对应位次：${params[0].data.weici}`
          },
        },
        xAxis: {
          name: '高考分数',
          nameTextStyle: {
            fontSize: 14,
            color: '#666',
          },
          // nameLocation: 'start',
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#666',
            showMaxLabel: true,
            margin: 23,
            fontSize: 14,
            interval: 0, // 隐藏所有刻度
            formatter: function (value) {
              if (!that.chartScoreNode) {
                return null
              }
              if (value == that.chartScoreNode.firstScore) {
                return `特殊类型/本科一批${value}分`;
              }
              else if (value == that.chartScoreNode.secondScore) {
                return `本科批${value}分`;
              }
              else if (value == that.chartScoreNode.thirdScore) {
                return `专科批${value}分`;
              }
            }
          },
          boundaryGap: false,
          data: [0],
        },
        yAxis: {
          name: '同分人数',
          nameLocation: 'end',
          nameGap: 20,
          nameTextStyle: {
            fontSize: 14,
          },
          type: "value",
          splitLine: {
            lineStyle: {
              type: 'dashed',
            }
          },
        },
        series: [
          {
            name: '对应位次:',
            data: [0],
            type: "line",
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: '#F96630'
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(249, 102, 48, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(249, 102, 48, 0)'
                }
              ])
            },
            markLine: {
              symbol: ['circle', 'none'],
              itemStyle: {
                normal: {
                  lineStyle: {
                    type: 'dashed',
                    color: '#F96630',
                    width: 2,
                  },
                  label: {
                    show: true,
                    position: 'end',
                    distance: 20,
                    textStyle: {
                      color : '#F96630',
                      fontSize: 14,
                    },
                    // formatter: function() {
                    //   return '调令缺失'
                    // }
                  }
                }
              },
              data: [{
                xAxis: '580',
                // y: '45%',
              }]
            }
          },
          {
            // name: '成绩',
            type: 'scatter',
            symbolSize: 8,
            itemStyle: {
              color: '#39B830'
            },
            data: [],
          }
        ],
      },
    }
  },
  computed: {
    // 弹窗是否可见
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
      }
    },
  },
  watch: {
    isVisible: async function (boolean) {
      if (!boolean) return
      await this.getYearByScore()
      if (!this.yearArray.length) return
      console.log('yearArray', this.yearArray);
      this.form.year = this.yearArray[0].year
      this.getLineChartScoreNode()
    },
  },
  created() {},
  mounted() {

  },
  methods: {
    initForm() {
      return {
        score: '580',
        type: '1',
        year: undefined,
      }
    },

    clearScore() {
      this.$set(this.chartOptions.series[0].markLine, 'data', [])
    },

    close() {
      this.$emit('update:dialogVisible', false)
    },

    reset() {
      this.form = this.initForm()
    },

    async onSearch() {
      let reg = /^[0-9]*[1-9][0-9]*$/
      if (!reg.test(this.form.score)) {
        return this.$message.error('请输入正确的数字')
      }

      if (this.form.score < 100 || this.form.score > 700) {
        return this.$message.error('请输入100-700分数区间')
      }

      await this.getYearByScore()
      this.getLineChartScoreNode()
    },

    onSelectYearItem(item) {
      this.form.year = item.year
      this.getLineChartScoreNode()
    },

    // 获取往年分数区间
    getYearByScore() {
      return request({
        method: 'get',
        url: '/score/line/getScore',
        params: {
          type: this.form.type,
          score: this.form.score,
        }
      }).then(res => {
        if (![0, 200].includes(res.code)) {
          return this.$message.error(res.msg)
        }
        console.log('score', res);
        this.yearArray = res.data
      })
    },
    getLineChartData() {
      this.chartOptions.series[1].data = []
			request({
        method: 'get',
        url: '/score/line/item',
        params: {
          type: this.form.type,
          year: this.form.year,
        }
      }).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
        this.chartOptions.series[0].data = res.data.map(item => {
          item.value = item.num
          return item
        })
        this.chartOptions.xAxis.data = res.data.map(item => item.score + '')
        this.chartOptions.series[0].markLine.data = [{ xAxis: this.form.score }]
        this.chartOptions.series[1].data.push([ this.chartScoreNode.firstScore.toString(), 0 ])
        this.chartOptions.series[1].data.push([ this.chartScoreNode.secondScore.toString(), 0 ])
        this.chartOptions.series[1].data.push([ this.chartScoreNode.thirdScore.toString(), 0 ])
			}).finally(() => {
        this.loading = false
      })
		},

    getLineChartScoreNode() {
      this.loading = true
      this.chartScoreNode = null
      request({
        method: 'get',
        url: '/score/line/data',
        params: {
          type: this.form.type,
          year: this.form.year,
        }
      }).then(res => {
        if (![0, 200].includes(res.code)) {
          return this.$message.error(res.msg)
        }
        this.chartScoreNode = res.data
      }).finally(() => {
        this.getLineChartData()
      })
    }
  }
}

</script>
<style lang="stylus" scoped>
.ui-dialog /deep/
  .el-dialog__header
    text-align center
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 30px;
.params-block /deep/
  .el-radio__label
    font-size 16px
  .input-score
    .el-input__inner
      border-radius 4px 0 0 4px
      border-right: none
  .search-button
    font-size: 16px;
    color: #fff;
    border-radius 0 4px 4px 0
    height 40px
.chooseYear
  margin: 30px auto 40px auto
  width: 857px;
  // height: 105px;
  background: #F9F9F9;
  border-radius: 6px;
  padding 7px 0
  &Item
    font-size: 16px;
    color: #333;
    line-height: 16px;
    text-align center
    cursor pointer
    &.is-active
      color #f96630
    &-th
      padding 15px 0
    &-td
      padding 15px 0
</style>
